<template>
<div>
    <div class="videoList">
        <div class="list">
            <img src="http://placehold.it/267x150" alt="" class="videoImg">
            <div class="iconfont icon-bofang bofang"></div>
            <div class="iconfont icon-quanping full"></div>
            <div class="listInfo">
                <div class="title">没想到，你竟是这样的西安</div>
                <div class="info">
                    <div class="name">
                        <span>耀州区纪检委</span>
                        <span class="icon">丨</span>
                    </div>
                    <div class="tag">
                        <span>创意视频</span>
                        <span class="icon">丨</span>
                    </div>
                    <div class="see">2156次播放</div>
                </div>
            </div>    
        </div>
</div>
        
</div>
</template>

<style lang="less">
.videoList{
    width: 100%;
    padding: 2vw 4vw;
    margin:0 auto;
    box-sizing: border-box;
    padding: 10px 0;
    position: relative;
    .list{
      width: 350px;
      height: 265px;
      margin: 0 10px;
      padding: 30px 10px;
      box-sizing: border-box;
      border: 1px solid; 
      .videoImg {
        width: 100%;
        border: 1px solid;
        height: 150px;
        overflow: hidden;
        background: #dadada;
        border-radius: 10px;
      }  
    }
    .bofang{
        position: absolute;
        left:50%;
        top:40%;
        transform: translate(-50%,-50%);
        font-size: 48px;
    }
    .full{
        position: absolute;
        left:85%;
        top:60%;
        transform: translate(-50%,-50%);
        font-size: 24px;
    }
    .listInfo{
        padding-top: 15px;
        .title{
            font-size: 14px;
        }
        .info{
            padding-top: 5px;
            display: flex;
            justify-content:flex-start;
            font-size: 12px;
            .icon{
                padding: 0 10px;
            }
        }
    }
}
</style>